<template>
  <div class="consult">
    <!-- 搜索组件 -->
    <div class="ser" :class="{ fixed1: isfixed }">
      <van-search
        v-model="value"
        shape="round"
        background="#fff"
        placeholder="搜索心理问题或咨询师姓名"
      />
      <div class="log">
        <img
          src="http://121.41.11.36:3000/images/consult/log1.png"
          alt=""
        /><span>客服</span>
      </div>
      <div class="log">
        <img
          src="http://121.41.11.36:3000/images/consult/log2.png"
          alt=""
        /><span>咨询指南</span>
      </div>
    </div>
    <div class="imgmodu">
      <ul>
        <li v-for="item in list" :key="item">
          <a href=""><img :src="item" alt="" /></a>
        </li>
      </ul>
    </div>
    <div class="xuanranbox" :class="{ fixed2: isfixed }">
      <div class="shaixuan">
        <ul>
          <li v-for="item in shaixuan" :key="item" id="add" @click="tanchu">
            <span>{{ item }}</span> <em></em>
          </li>
        </ul>
      </div>
      <div class="shaixuan2">
        <span v-for="item in shaixuan2" :key="item">{{ item }}</span>
      </div>
    </div>

    <!-- <div>{{num}}</div> -->
    <div class="data">
      <ul>
        <li v-for="item in consultdata" :key="item" @click="tiaozhuan(item.id)">
          <div class="imgbox">
            <img :src="item.img" alt="" /> <span>今天可预约</span>
          </div>
          <div class="data-detail">
            <p class="name">
              {{ item.name
              }}<span class="right price"
                ><i>￥</i> <em>{{ item.price }}</em
                >起</span
              >
            </p>
            <p class="dengji">
              {{ item.personal }}
              <span class="right city">{{ item.city }}</span>
            </p>
            <p class="pinjia">
              <van-rate
                v-model="item.star"
                size="12px"
                gutter="2px"
                :readonly="true"
                allow-half
              />
              <span
                ><em>{{ item.evaluate }}</em> 条评价</span
              >
            </p>
            <p class="help">
              <span
                >帮助 <em>{{ item.assistance }}</em> 人</span
              ><span
                >服务 <em>{{ item.items }}</em> 小时</span
              >
            </p>
            <p>
              <button class="right chat">{{ item.chat }}</button>
            </p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { reactive, computed, onMounted, ref } from "vue";
// import { Toast } from 'vant';
import { useStore } from "vuex";
import { useRouter } from "vue-router";

export default {
  name: "consult",
  setup() {
    const list = reactive([
      "http://121.41.11.36:3000/images/consult/tu1.png",
      "http://121.41.11.36:3000/images/consult/tu2.png",
      "http://121.41.11.36:3000/images/consult/tu3.png",
      "http://121.41.11.36:3000/images/consult/tu4.png",
    ]);
    const shaixuan = reactive(["主题", "地区", "排序", "筛选"]);
    const shaixuan2 = reactive([
      "今天可预约",
      "现在有空",
      "男咨询师",
      "女咨询师",
    ]);
    const store = useStore();
    // 获取状态管理中的数据
    const consultdata = computed(() => store.state.consult.consultdata);
    // const num = computed(() => store.state.consult.num);
    const fn = () => store.dispatch("getconsultdaasync");

    const router = useRouter();
    const value = ref();
    // 跳转详情页事件
    const tiaozhuan = (id) => {
      router.push("/detail/" + id);
    };
    // 添加吸顶事件
    let isfixed = ref(false);
    const offsetup = ref(245);

    const xiding = () => {
      let scrolltop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      isfixed.value = scrolltop > offsetup.value ? true : false;
    };

    onMounted(() => {
      fn();
      // xiding();
      window.addEventListener("scroll", xiding);
    });
    return {
      list,
      shaixuan,
      shaixuan2,
      fn,
      consultdata,
      tiaozhuan,
      value,
      isfixed,
      offsetup,
      xiding,
    };
  },
};
</script>
<style lang="less">
@import "../../assets/css/var.less";
.consult {
  width: 100%;
  background: #fff;
  font-family: PingFang SC;
  .fixed1 {
    position: fixed;
    top: 0;
    left: 0;
    background: #fff;
    z-index: 999;
  }
  .fixed2 {
    position: fixed;
    top: 50px;
    left: 0;
    background: #fff;
    z-index: 999;
  }
  .ser {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #e3e3e4;
  }
  .van-search {
    width: 250px;
    height: 30px;
    font-family: PingFang SC;
  }

  .log {
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-left: 19px;

    img {
      width: 22px;
      height: 22px;
    }
    span {
      font-size: 9px;
      // font-weight: bold;
      color: #343434;
    }
  }
  .imgmodu {
    padding-top: 10px;
    padding-left: 10px;
    // flex-direction:column;
    // flex-wrap: wrap;
    ul {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
    }
    img {
      width: 175px;
      height: 90px;
    }
  }
  .xuanranbox {
    width: 100%;
  }
  .shaixuan {
    width: 100%;
    padding-top: 15px;
    ul {
      .around();
      width: 100%;
      li {
        width: 25%;
        font-size: 12px;
        text-align: center;
        span {
          color: #333333;
        }
        em {
          display: inline-block;
          width: 0;
          height: 0;
          border-width: 5px 5px 0;
          border-style: solid;
          border-color: #e3e3e4 transparent transparent; /*灰 透明 透明 */
          position: relative;
          margin-left: 5px;
        }
      }
    }
  }
  .shaixuan2 {
    .around();
    padding-top: 14px;
    padding-bottom: 8px;
    span {
      display: inline-block;
      width: 79px;
      height: 20px;
      font-size: 10px;
      color: #4d4d4d;
      background: #f7f7f7;
      border-radius: 10px;
      text-align: center;
      line-height: 20px;
    }
  }
  .data {
    // margin-bottom: 134px;
    ul {
      padding-bottom: 86px;
    }
    li {
      padding: 14px 14px 12px 11px;
      border-top: 1px solid #e3e3e4;
      display: flex;
      flex-direction: row;
      font-size: 11px;
      position: relative;
    }
    .imgbox {
      width: 89px;
      height: 107px;
      position: relative;
      img {
        width: 100%;
        height: 100%;
      }
      span {
        position: absolute;
        left: 0;
        bottom: 3px;
        z-index: 999;
        font-size: 9px;
        color: #fff;
      }
    }

    .data-detail {
      margin-left: 7px;
      font-size: 11px;
      color: #333333;
      .name {
        font-size: 16px;
        line-height: 30px;
        font-weight: bold;
      }
      .dengji {
        white-space: nowrap;
        font-weight: bold;
      }
      .pinjia {
        line-height: 28px;
        span {
          margin-left: 11px;
        }
      }
      .pinjia,
      .help {
        color: #7d7d7d;
        span {
          margin-right: 7px;
        }
        em {
          color: #333333;
          font-weight: normal;
        }
      }
      .right {
        position: absolute;
        right: 14px;
      }
      .price {
        color: #e94d38;
        font-weight: normal;
        font-size: 9px;
        i {
          position: absolute;
          font-size: 10px;
          top: -2px;
          left: -10px;
          // margin-right: -10px;
        }
        em {
          font-size: 15px;
          // margin-right: -3px;
        }
      }
      .city {
        font-size: 10px;
        color: #7d7d7d;
      }
      .chat {
        width: 53px;
        height: 22px;
        background: #54abf1;
        border-radius: 11px;
        border: none;
        color: #fff;
        font-size: 12px;
      }
    }
  }

  // 设置评分星星的背景色
  .van-rate__icon--full {
    background: #ff5744;
  }
}
:root {
  --van-tabbar-item-text-color: #d3d3d5;
  --van-cell-font-size: 11px;
  --van-cell-text-color: #b5b5b9;
  --van-rate-icon-full-color: #fff; //评分星星颜色
}
</style>
